import { lazy, type JSX } from 'react'
import { createBrowserRouter } from 'react-router-dom'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';

const App = lazy(() => import('../App'))
const Home = lazy(() => import('../pages/Home/index'))
const My = lazy(() => import('../pages/My/index'))
const Detail = lazy(() => import('../pages/Detail/index'))
const Error = lazy(() => import('../pages/Error/index'))
const Login = lazy(() => import('../pages/Login/index'))
const Props = lazy(() => import('../pages/Props/index'))
const Han = lazy(() => import('../pages/Props/Han/index'))
const List = lazy(()=>import('../pages/List/index'))
const Dog = lazy(()=>import('../pages/Dog/index'))
const Huan = lazy(()=>import('../pages/Huan/index'))

type homerouters = {
    path: string
    element: JSX.Element
    children?: homerouters
    icon?: any
    label?: string
}[]

export const tabbar: homerouters = []
const allRouter : any = {
    home:{
        path: '/home',
        element: <Home></Home>,
        icon: <MenuFoldOutlined></MenuFoldOutlined>,
        label: '首页'
    },
    my:{
        path: '/my',
        element: <My></My>,
        icon: <UploadOutlined></UploadOutlined>,
        label: '我的'
    },
    detail:{
        path: '/detail/:id',
        element: <Detail></Detail>,
        icon: <MenuUnfoldOutlined></MenuUnfoldOutlined>,
        label: '详情'
    },
    dog:{
        path: '/dog',
        element: <Dog></Dog>,
        icon: <VideoCameraOutlined></VideoCameraOutlined>,
        label: '有道'
    },
    list:{
        path: '/list',
        element: <List></List>,
        icon: <UserOutlined></UserOutlined>,
        label: '列表'
    },
    huan:{
        path: '/huan',
        element: <Huan></Huan>,
        icon: <UploadOutlined></UploadOutlined>,
        label: '换肤'
    },
    props:{
        path: '/props',
        element: <Props></Props>,
        icon:<VideoCameraOutlined></VideoCameraOutlined>,
        label: '分类',
        children: [
            {
                path: '/props/han',
                element: <Han></Han>,
                icon: <VideoCameraOutlined></VideoCameraOutlined>,
                label: '三级'
            }
        ]
    },
}
const role = {
    admin:{
        Myrouter:['home','my','detail','list','props','dog','huan']
    },
    user:{
        Myrouter:['home','props']
    }
}
const { Myrouter } = role[localStorage.getItem('role')==='1'?'admin':'user']
Myrouter.forEach((item)=>{
   tabbar.push(allRouter[item])
})
const routes : homerouters=[
    {
        path:'/',
        element:<App></App>,
        children:tabbar,
    },
    {
        path:'/login',
        element:<Login></Login>,
    },
    {
        path:'*',
        element:<Error></Error>,
    },
]
const router = createBrowserRouter(routes)
export default router